Improve navbar overflow handling and simplify link width measurement #200
Conversation
| let shouldShowMobile = $state(false); | ||
| let navContainer; | ||
| let linksContainer = $state(null); | ||
| let linksWidthCache = 0; |
There was a problem hiding this comment.
rename this to cachedLinksWidth
| } | ||
| function measureLinksWidth() { | ||
| if (headerLinks && !linksContainer) { |
There was a problem hiding this comment.
Use an early return instead of deep nesting:
if (!headerLinks || linksContainer) {
return;
}
Note: this logic ^^ may be incorrect! You'll need to test and validate!
There was a problem hiding this comment.
Yes, correct. I have updated the function to use an early return to avoid deep nesting and make the code more readable.
| tempDiv.style.position = 'absolute'; | ||
| tempDiv.style.visibility = 'hidden'; | ||
| tempDiv.style.display = 'flex'; | ||
| tempDiv.style.gap = '1rem'; |
There was a problem hiding this comment.
where does the gap here and the padding on line 62 come from? Are these derived from the current style values on the page? If so, those should be reused somehow in case the styling changes later.
There was a problem hiding this comment.
The gap and padding are derived from actual style values used in the page here (<a href={value} class="block px-2 py-1 font-semibold text-gray-900 dark:text-white" >{key}</a >).
For ease, I've now defined constants in the file with clear comments explaining which Tailwind classes they correspond to.
Note: If the styles change later, we just have to update these constants according to the corresponding Tailwind classes from the template. That's the best & easiest approach to implement, I think :)
Fixes #189
Changes
measureLinksWidthfunction to use actual link text for accurate width measurement.Screenshot:
